<template>
  <div class="digital-human-voice">
    <div class="voice-container">
      <!-- 语音可视化 -->
      <div class="voice-visualization">
        <div class="voice-avatar">
          <div class="avatar-circle" :class="{ speaking: isSpeaking, listening: isListening }">
            <div class="avatar-inner">
              <svg viewBox="0 0 24 24" fill="currentColor">
                <path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z"/>
                <path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/>
              </svg>
            </div>
          </div>
          
          <!-- 语音波形 -->
          <div class="voice-waves" :class="{ active: isSpeaking || isListening }">
            <div class="wave" v-for="i in 5" :key="i" :style="{ animationDelay: `${i * 0.1}s` }"></div>
          </div>
        </div>
        
        <!-- 状态文本 -->
        <div class="voice-status">
          <h3>{{ statusTitle }}</h3>
          <p>{{ statusDescription }}</p>
        </div>
      </div>
      
      <!-- 语音控制 -->
      <div class="voice-controls">
        <button 
          class="voice-btn"
          :class="{ active: isListening }"
          @mousedown="startListening"
          @mouseup="stopListening"
          @touchstart="startListening"
          @touchend="stopListening"
        >
          <svg viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z"/>
            <path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/>
          </svg>
          <span>{{ isListening ? '松开结束' : '按住说话' }}</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'
import type { DigitalHumanController } from '../controller/DigitalHumanController'

// Props
interface Props {
  controller: DigitalHumanController | null
}

const props = defineProps<Props>()

// 响应式数据
const isSpeaking = ref(false)
const isListening = ref(false)
const voiceLevel = ref(0)

// 计算属性
const statusTitle = computed(() => {
  if (isSpeaking.value) return '数字人正在说话'
  if (isListening.value) return '正在聆听您的声音'
  return '语音通话已就绪'
})

const statusDescription = computed(() => {
  if (isSpeaking.value) return '请耐心等待数字人回应'
  if (isListening.value) return '请清晰地说出您的问题'
  return '按住下方按钮开始对话'
})

// 方法
const startListening = () => {
  isListening.value = true
  // 这里可以启动语音识别
  console.log('Start listening')
}

const stopListening = () => {
  isListening.value = false
  // 这里可以停止语音识别并发送给数字人
  console.log('Stop listening')
  
  // 模拟数字人回应
  setTimeout(() => {
    isSpeaking.value = true
    setTimeout(() => {
      isSpeaking.value = false
    }, 3000)
  }, 500)
}

// 监听控制器变化
watch(() => props.controller, (newController) => {
  if (newController) {
    // 监听控制器的语音事件
    newController.on('speakingChanged', (speaking: boolean) => {
      isSpeaking.value = speaking
    })
  }
}, { immediate: true })

// 生命周期
onMounted(() => {
  // 模拟语音级别变化
  setInterval(() => {
    if (isListening.value || isSpeaking.value) {
      voiceLevel.value = Math.random() * 100
    } else {
      voiceLevel.value = 0
    }
  }, 100)
})
</script>

<style scoped>
.digital-human-voice {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.voice-container {
  text-align: center;
  max-width: 400px;
  padding: 2rem;
}

.voice-visualization {
  margin-bottom: 3rem;
}

.voice-avatar {
  position: relative;
  display: inline-block;
  margin-bottom: 2rem;
}

.avatar-circle {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
  border: 3px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  animation: float 3s ease-in-out infinite;
}

.avatar-circle.speaking {
  border-color: #4CAF50;
  box-shadow: 0 0 30px rgba(76, 175, 80, 0.5);
  animation: pulse 1s ease-in-out infinite;
}

.avatar-circle.listening {
  border-color: #2196F3;
  box-shadow: 0 0 30px rgba(33, 150, 243, 0.5);
  animation: pulse 1s ease-in-out infinite;
}

.avatar-inner {
  width: 60px;
  height: 60px;
  color: rgba(255, 255, 255, 0.8);
}

.avatar-inner svg {
  width: 100%;
  height: 100%;
}

.voice-waves {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.voice-waves.active {
  opacity: 1;
}

.wave {
  width: 4px;
  height: 20px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 2px;
  animation: wave-animation 1s ease-in-out infinite;
}

.voice-status h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
}

.voice-status p {
  font-size: 1rem;
  margin: 0;
  opacity: 0.8;
}

.voice-controls {
  display: flex;
  justify-content: center;
}

.voice-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 2rem;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
}

.voice-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
}

.voice-btn.active {
  background: rgba(33, 150, 243, 0.8);
  border-color: #2196F3;
  box-shadow: 0 0 20px rgba(33, 150, 243, 0.5);
}

.voice-btn svg {
  width: 24px;
  height: 24px;
}

.voice-btn span {
  font-size: 0.875rem;
  font-weight: 500;
}

/* 动画 */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes wave-animation {
  0%, 100% {
    height: 20px;
    opacity: 0.5;
  }
  50% {
    height: 40px;
    opacity: 1;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .voice-container {
    padding: 1rem;
  }
  
  .avatar-circle {
    width: 120px;
    height: 120px;
  }
  
  .avatar-inner {
    width: 48px;
    height: 48px;
  }
  
  .voice-status h3 {
    font-size: 1.25rem;
  }
  
  .voice-status p {
    font-size: 0.875rem;
  }
  
  .voice-btn {
    padding: 0.75rem 1.5rem;
  }
}
</style>
